<template>
    <div class="concentration">
        <div class="swipe" v-if="data.banners && data.banners.length > 0">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="(item, index) in data.banners" :key="index"
                >
                    <van-image
                    @click="toUrl(item)"
                    width="100%" height="100%" fit="fill" :src="item.bannerSrc" />
                </van-swipe-item>
            </van-swipe>
        </div>
        

        <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        class="list"
        @load="onLoad"
        >
            <br>
            <div class="menus" v-if="data.menus && data.menus.length > 0">
                <van-grid :border="false">
                    <van-grid-item
                    v-for="(item, index) in data.menus" :key="index"
                    @click="toUrl(item)"
                    :icon="item.bannerSrc"
                    :text="item.title"
                    >
                    </van-grid-item>
                </van-grid>
            </div>
            <div>
                <div class="dataBox"
                v-for="(item, index) in data.list" :key="index"
                >
                    <div class="title">{{ item.home.title }}</div>
                    <ListDataMp3 :dataList="item.list" v-if="item.home.type == 'song_line'"/>
                    <bookList :books="item.list" v-else-if="item.home.type == 'book_info'"/>
                </div>
            </div>
        </van-list>
        <br>
        <br>
        <br>
        <br>

    </div>
</template>

<script>
    import bookList from '@/components/book/bookList.vue';
    export default {
        props : ['data'],
        components : {
            bookList
        },
        data() {
            return {
                limit : 20,
                page : 1,
                loading : false,//是否显示加载状态
                finished : false,//是否加载到头了
                Load : false,
            }
        },
        created() {
        },
        methods: {
            toUrl(item){
                if (!item.toPath) {
                    return
                }
                this.$router.push(item.toPath + '?' + (item.toParams ? '' : item.toParams));
            },
            onLoad(){
                this.loading = false
                this.finished = true
            },
        },
    }
</script>

<style scoped>
.concentration{
    height: calc(100vh - 94px);
    overflow: auto;
}
.swipe{
  margin: 0 10px;
  width: calc(100% - 20px);
  border-radius: 20px;
  overflow: hidden;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
}
.menus{
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin: 0 10px;
}

.list{
    background: #f8f8f8;
}

.dataBox {
    position: relative;
    background: #fff;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
    padding: 0 5px;
    margin: 10px 0;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}
.title {
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
}
</style>